<template>
  <section class="hot-recommend-section">
    <!-- <div class="section-title">
      <h2>WHAT WE RECOMMEND</h2>
      <div class="divider"></div>
    </div> -->
    
    <div class="hot-recommend-container" v-if="recommendItems.length > 0">
      <div class="image-row">
        <div class="image-item" v-for="(item, index) in recommendItems.slice(0, 4)" :key="index">
          <a :href="`/classify/${item.url.url}-${item.classify_id.split('-')[1]}.html`" target="_self" title="image">
            <div class="image-wrapper">
              <Image :imgStyle="{ 'aspect-ratio': '1 / 1.4' }"
                :src="item.image"
                :alt="item.title || '热门推荐'"></Image>
              <!-- <div class="overlay">
                <a :href="`${item.url?.url}-${item.classify_id}.html`" class="shop-now">SHOP NOW</a>
              </div> -->
            </div>
          </a>
          <div class="title">{{ item.title }}</div>
        </div>
      </div>
    </div>
  </section>
</template>

<script lang="ts" setup>
import { ref, defineProps } from 'vue';
import Image from '@/components/Image.vue';

// 推荐项目的数据结构
interface RecommendItem {
  image: string;
  title: string;
  link: string;
  classify_id?: string;
  url?: {
    url: string;
  };
}

const props = defineProps({
  items: {
    type: Array as () => RecommendItem[],
    default: () => []
  }
});

// 推荐项目数据
const recommendItems = ref<RecommendItem[]>(props.items.length > 0 ? props.items : [
  // {
  //   image: 'https://www.reiss.com/cms/resource/blob/971932/c663d02e8295173547e77815cbe0d541/dresses-data.jpg',
  //   title: 'Reiss Dresses',
  //   link: '/classify/dresses-39.html',
  //   url: {url: 'dresses'},
  //   classify_id: "32-39"
  // },
  // {
  //   image: 'https://www.reiss.com/cms/resource/blob/971942/3e381e449b20a37b483891da538105a8/suits-and-tailoring-data.jpg',
  //   title: 'Reiss Suits & Tailoring',
  //   link: '/classify/suits-39.html',
  //   url: {url: 'suits'},
  //   classify_id: "32-39"
  // },
  // {
  //   image: 'https://www.reiss.com/cms/resource/blob/960878/ec532f994df8a7f69ec4444e7de896cb/petite-data.jpg',
  //   title: 'Petite Collection',
  //   link: '/classify/petite-39.html',
  //   url: {url: 'petite'},
  //   classify_id: "32-39"
  // },
  // {
  //   image: 'https://www.reiss.com/cms/resource/blob/971934/d41b56e2015371500fee8720eea6d722/knitwear-data.jpg',
  //   title: 'Knitwear Collection',
  //   link: '/classify/knitwear-39.html',
  //   url: {url: 'knitwear'},
  //   classify_id: "32-39"
  // },
  // {
  //   image: 'https://www.reiss.com/cms/resource/blob/960878/ec532f994df8a7f69ec4444e7de896cb/petite-data.jpg',
  //   title: 'Seasonal Collection',
  //   link: '/classify/seasonal-39.html',
  //   url: {url: 'seasonal'},
  //   classify_id: "32-39"
  // }
]);

// 处理链接构建
const getItemLink = (item: RecommendItem): string => {
  if (item.link) return item.link;
  if (item.url && item.classify_id) {
    return `/classify/${item.url.url}-${item.classify_id.split('-')[1]}.html`;
  }
  return '#';
};
</script>

<style scoped lang="scss">
// 标题样式
.section-title {
  text-align: center;
  margin-bottom: 20px;
  
  h2 {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 2px;
    margin-bottom: 15px;
    color: #000;
  }
  
  .divider {
    width: 50px;
    height: 2px;
    background-color: #000;
    margin: 0 auto;
  }
}

// 热门推荐区域样式
.hot-recommend-section {
  margin-bottom: 60px;
}

.hot-recommend-container {
  margin: 0 auto 40px;
  width: 100%;
  padding: 0 20px;
}

.image-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  // 一行展示4个内容

  overflow-x: hidden;
  padding-bottom: 10px;
}

.image-item {
  flex: 0 0 auto;
  // width: calc(20% - 16px);
  min-width: 200px;
  
  .title {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    line-height: 24px;
    margin-top: 10px;
    color: #232323;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  .image-wrapper {
    position: relative;
    overflow: hidden;
    
    .overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(255, 255, 255, 0.8);
      padding: 15px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      transform: translateY(100%);
      transition: transform 0.3s ease;
      a{
        text-align: center;
      }
    }
    
    .shop-now {
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 1px;
      color: #000;
      position: relative;
      
      &:after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #000;
      }
    }
    
    &:hover .overlay {
      transform: translateY(0);
    }
  }
}

.image-item a {
  display: block;
  width: 100%;
}

.image-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.image-item:hover img {
  transform: scale(1.05);
}

// 响应式样式
@media (max-width: 992px) {
  .image-item {
    width: calc(33.333% - 14px);
    min-width: 180px;
  }
}

@media (max-width: 768px) {
  .section-title h2 {
    font-size: 22px;
  }

  .image-item {
    width: calc(33.333% - 14px);
    min-width: 160px;
    
    .title {
      font-size: 14px;
      line-height: 20px;
    }
  }
  
  .image-row {
    overflow-x: auto;
    padding-bottom: 20px;
    scrollbar-width: thin;
  }
  
  .image-row::-webkit-scrollbar {
    height: 4px;
  }
  
  .image-row::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
  }
}

@media (max-width: 576px) {
  .hot-recommend-section {
    margin-bottom: 40px;
  }
  
  .hot-recommend-container {
    padding: 0 15px;
  }
  
  .section-title {
    margin-bottom: 30px;
    
    h2 {
      font-size: 20px;
      margin-bottom: 10px;
    }
  }
  
  .image-item {
    width: calc(50% - 10px);
    min-width: 140px;
  }
}

@media (max-width: 480px) {
  .image-item .title {
    font-size: 12px;
    line-height: 18px;
    margin-top: 12px;
  }
  
  .image-wrapper .shop-now {
    font-size: 12px;
  }
  
  .image-wrapper .overlay {
    padding: 10px 0;
  }
}
</style> 